<template>
	<view class="path">
		<view class="path_title">
			<view class="line"></view>
			<text>嵌入路径</text>
		</view>
		<view class="path_contant">
			<view class="path_contant_contant">【如何嵌入】进入微信公众号后台——>编辑公众号文章——>选择[小程序]，按页面提示 添加AppID、PagePath或图片保存即可使用。</view>
			<view class="path_contant_id">【AppID】wx6f6831e5b83b7535</view>
			<view class="path_contant_path">【PagePath】pages/detail/detail?id=</view>
		</view>
		<view class="path_copy" @tap="copy">复制文本</view>
		<navigation></navigation>
	</view>
</template>

<script>
import navigation from '@/components/navigation/navigation.vue';
import h5Copy from '@/js_sdk/junyi-h5-copy/junyi-h5-copy.js';
export default {
	components: {
		navigation
	},
	data() {
		return {
			ID: 'wx6f6831e5b83b7535',
			Path: 'pages/detail/detail?id'
		};
	},
	methods: {
		copy() {
			let content = '【AppId】:' + this.ID + ' 【PagePath】:' + this.Path; // 复制内容，必须字符串，数字需要转换为字符串
			// #ifdef H5
			const result = h5Copy(content);
			if (result === true) {
				uni.showToast({
					title: '复制成功'
				});
			} else {
				uni.showToast({
					title: '复制失败',
					icon: 'none'
				});
			}
			// #endif
			// #ifdef MP-WEIXIN
			uni.setClipboardData({
				data: content,
				success: function() {
					uni.showToast({
						title: '复制成功'
					});
				}
			});
			// #endif
		}
	}
};
</script>

<style lang="less" scoped>
.path {
	padding: 0 30upx;
	box-sizing: border-box;
	.path_title {
		width: 100%;
		height: 90upx;
		display: flex;
		align-items: center;
		.line {
			width: 4upx;
			height: 26upx;
			background-color: #8530e8;
			margin-right: 20upx;
		}
		text {
			font-size: 32upx;
			line-height: 40upx;
			font-weight: bold;
			color: #333333;
		}
	}
}
.path_contant {
	width: 100%;
	height: 220upx;
	padding: 0 10upx;
	padding-top: 10upx;
	box-sizing: border-box;
	background-color: #f2f2f2;
	border-radius: 10upx;
	.path_contant_contant,
	.path_contant_id,
	.path_contant_path {
		font-size: 24upx;
		color: #333333;
		line-height: 40upx;
	}
}
.path_copy {
	width: 100%;
	height: 92upx;
	border: 2upx solid #8530e8;
	margin-top: 35upx;
	box-sizing: border-box;
	border-radius: 46upx;
	font-size: 32upx;
	color: #8530e8;
	text-align: center;
	line-height: 88upx;
}
</style>
<style>
page {
	background-color: #ffffff;
}
</style>
